<html>
<head>
<title>reddirect options</title>
<style>
    body {
        width: auto;
        text-align: center;
    }
    
    #container {
        padding-top: 40px;
    }
    
    .help {
        margin: 30px;
    }
</style>
<script type="text/javascript" src="shared.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

var save_button;

function get_save_button() {
    save_button = save_button || $("input[name='save']");
    return save_button;
}

function save() {
    get_save_button().attr("disabled", true);
    
    // store blacklist
    var blacklist = decode($("#blacklist").val());
    localStorage["blacklist"] = encode(blacklist);
    
    // store whitelist
    var whitelist = decode($("#whitelist").val());
    localStorage["whitelist"] = encode(whitelist);
    
    // reset view
    load();
    
    get_save_button().val("Saved!");
    
    // Put it back to "Save"
    setTimeout(function() {
        get_save_button().attr("disabled", false);
        get_save_button().val("Save");
        }, 800);
}

function load() {
    var whitelist = decode(localStorage["whitelist"]);
    $("#whitelist").val(encode(whitelist));
    
    var blacklist = decode(localStorage["blacklist"]);
    $("#blacklist").val(encode(blacklist));
}

function restore() {
    var result = confirm("Are you sure you want to restore defaults?");
    if (!result) {
        return;
    }
    init(true);
    load();
}

$(document).ready(function() {
    // fill in view from local storage
    load();
});
</script>
</head>

<body>
<div id="container">
    <div id="title">
        <b>reddirect: options</b>
    </div>
    <div id="buttons">
        <input type="button" name="save" value="Save" onclick="save()">
        <input type="button" name="restore" value="Restore Defaults" onclick="restore()">
    </div>
    <div id="list_container">
        <div class="help">
            Each line should contain one URL.
            <br>Applies to domains only, not full urls.
            <br>Entry in whitelist overrides one in blacklist.
        </div>
        <div>
            Whitelist: <br>
            <textarea id="whitelist" rows="10" cols="50"></textarea>
        </div>
        <div>
            Blacklist: <br>
            <textarea id="blacklist" rows="10" cols="50"></textarea>
        </div>
    </div>
</div>
</body>
</html>
